<template>
  <div>
    <br />
    <el-row>
      <el-tabs v-model="tabIndex" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待处理" name="1"></el-tab-pane>
        <el-tab-pane label="待调剂" name="2"></el-tab-pane>
        <el-tab-pane label="实施中" name="3"></el-tab-pane>
        <el-tab-pane label="已完成" name="4"></el-tab-pane>
      </el-tabs>
    </el-row>
    <div class="tableheader">
      <span class="descs">车辆申请处置审核数({{total}}个）</span>
      
    </div>
    <el-table
      ref="multipleTable"
      :border="true"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{background:'#F5F7FA'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="pbType" label="申请单位"></el-table-column>
      <el-table-column prop="applyCname" label="处置方式"></el-table-column>
      <el-table-column prop="applyReason" label="原因"></el-table-column>
      <el-table-column prop="pbTypeName" label="车辆数量"></el-table-column>
      <el-table-column prop="person" label="经办人"></el-table-column>
      <el-table-column prop="personTel" label="申报时间"></el-table-column>
      <el-table-column prop="createTime" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="danger" @click="update">实时调剂</el-button>
          <el-button size="mini" type="success" @click="show">查看</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="CarpageSize"
          :total="Cartotal"
          :current-page="CarpageNo"
          @current-change="CarfetchData"
          @size-change="CarpageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<style>
[v-cloak] {
  display: none;
}

#container {
  width: 100%;
  height: 400px;
}

@media screen and (min-width: 992px) {
  .modal-dialog {
    width: 992px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}

.tableheader .descs {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
}

.upload_exl .el-upload,
.upload_exl .el-upload-dragger {
  width: 100%;
}

.upload_exl .el-upload-dragger .el-button {
  margin-top: 76px;
}
</style>
<script>
import { axios_req } from "@/api/carcommon";
export default {
  data: function() {
    return {
      tabIndex: 0,
      total: 0,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      Cartotal: 0,
      CarpageNo: 1,
      CarpageSize: 10
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleClick(tab, event) {
      var sign = event.target.getAttribute("id").split("-")[1];
      console.log(sign);
    },
    async fetchData(pageNo) {},
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    CarpageSizeChange(newSize) {
      this.CarpageSize = newSize;
      this.CarpageNo = 1;
      this.fetchData();
    },
    async CarfetchData(pageNo) {},
    add() {},
    download() {}
  }
};
</script>